import L from 'leaflet';
import 'leaflet.heat';
import 'leaflet/dist/leaflet.css';
import React, { useEffect } from 'react';

const HeatMap = () => {

  const generateHeatmapData = (count = 10000) => {
    // 中国大致范围
    const bounds = {
      lat: {
        min: 18,    // 南端
        max: 53     // 北端
      },
      lng: {
        min: 73,    // 西端
        max: 135    // 东端
      }
    };
  
    // 生成随机数的辅助函数
    const random = (min, max) => {
      return min + Math.random() * (max - min);
    };
  
    // 生成强度值的辅助函数（使用正态分布模拟更真实的数据）
    const generateIntensity = () => {
      // Box-Muller 转换
      const u1 = Math.random();
      const u2 = Math.random();
      const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
      // 将正态分布值转换到 0.1-2.0 范围
      return Math.max(0.1, Math.min(2.0, 1 + 0.3 * z));
    };
  
    // 生成数据点
    const points = Array.from({ length: count }, () => {
      const lat = random(bounds.lat.min, bounds.lat.max);
      const lng = random(bounds.lng.min, bounds.lng.max);
      const intensity = generateIntensity();
      
      return [
        Number(lat.toFixed(6)),
        Number(lng.toFixed(6)),
        Number(intensity.toFixed(3))
      ];
    });
  
    return points;
  };
  
  // 生成 10000 个数据点
  const heatmapData = generateHeatmapData(10000);
  useEffect(() => {
    // 创建地图实例
    const map = L.map('map').setView([35.5, 104.5], 4);

    // 添加底图
    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    //   attribution: '© OpenStreetMap contributors'
    // }).addTo(map);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
    // 热力图数据 [纬度, 经度, 强度值]
    const points = [
      [37.41, 96.51, 1.510],
      [39.91, 116.40, 1.2],
      [31.23, 121.47, 0.9],
      [23.13, 113.27, 0.7],
      // ... 更多数据点
    ];

    // 创建热力图层
    L.heatLayer(heatmapData, {
      radius: 50,        // 热力点的半径
      blur: 15,         // 模糊程度
      maxZoom: 10,      // 最大缩放级别
      max: 2.0,         // 最大值
      gradient: {       // 颜色渐变
        0.2: 'blue',
        0.4: 'cyan',
        0.6: 'lime',
        0.8: 'yellow',
        1.0: 'red'
      }
    }).addTo(map);
    map.on('click', function(ev) {
      alert(ev.latlng); // ev is an event object (MouseEvent in this case)
  });
  L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: ["1", "2", "3", "4"],
    maxZoom: 18
  }).addTo(map);
  }, []);

  return <div id="map" style={{ height: '100vh', width: '100%' }} />;
};

export default HeatMap;